<template>
  <CDialog
    :visible="visible"
    :title="title"
    type="add"
    width="1000px"
    @submit="handleSubmit"
    @cancel="handleCancel"
    @outerOpen="outerOpen"
  >
    <div class="map-wrapper">
      <div ref="mapContainer" class="map-dlg-map_container"></div>
      <img
        class="location-icon"
        src="@/assets/images/point-in-map.png"
        alt=""
      />
    </div>
  </CDialog>
</template>
<script>
import CDialog from '@/components/CDialog'
import { aMapLoader } from '@/utils/aMapApi'
import { guid } from '@/utils'

export default {
  name: 'MapDlg',
  components: { CDialog },
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    title: {
      type: String,
      required: true,
    },
    defaultPoint: {
      type: Object,
    },
  },
  data() {
    return {
      map: null,
      point: {},
    }
  },
  mounted() {
    this.setPoint(this.defaultPoint)
  },
  watch: {
    defaultPoint(val) {
      this.point = val
    },
  },
  methods: {
    setPoint(point) {
      this.point = {
        lat: point.lat,
        lng: point.lng,
      }
    },
    setCenter() {
      if (this.point.lat && this.point.lng) {
        let point = new window.AMap.LngLat(this.point.lng, this.point.lat)
        this.map.setZoomAndCenter(18, point)
      } else {
        let point = new window.AMap.LngLat('116.397912', '39.908929')
        this.map.setZoomAndCenter(18, point)
        new window.AMap.plugin('AMap.CitySearch', () => {
          var citySearch = new window.AMap.CitySearch()
          citySearch.getLocalCity((status, result) => {
            if (status === 'complete' && result.info === 'OK') {
              this.map.setBounds(result.bounds)
            }
          })
        })
      }
    },
    initMap() {
      aMapLoader().then(() => {
        let divId = (this.$refs.mapContainer.id = guid())
        this.map = new window.AMap.Map(divId, {
          center: [this.point.lng, this.point.lat],
          zoom: 18,
        })

        window.AMap.plugin(['AMap.ToolBar'], () => {
          var toolbar = new window.AMap.ToolBar({
            position: 'LT',
            locate: false,
          })
          this.map.addControl(toolbar)
        })

        window.AMap.event.addListener(this.map, 'mapmove', () => {
          var center = this.map.getCenter()
          this.setPoint(center)
        })
        this.setCenter()
      })
    },
    handleSubmit() {
      console.log(this.point)
      this.$emit('update:visible', false)
      this.$emit('submit', this.point)
    },
    handleCancel() {
      this.$emit('update:visible', false)
    },
    outerOpen() {
      this.$nextTick(() => {
        this.setPoint(this.defaultPoint)
        this.initMap()
      })
    },
  },
}
</script>
<style lang="scss">
.map-dlg-map_container {
  width: 100%;
  height: 500px;

  .anchorBL {
    display: none;
  }
}
.map-wrapper {
  width: 100%;
  height: 500px;
  position: relative;
  .location-icon {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    width: 20px;
  }
}
</style>
